<template>
<el-dialog
    class="login_dialog"
    v-model="visible"
    @close="closeDialog"
>
  <div class="main_body">
    <div class="main_left">

    </div>
    <div class="main_right">
      <div class="login_form">
        <div class="form_title">登录</div>
        <div class="error_tip" v-show="showError">
          <img src="../assets/login_error.svg" style="width:14px;height:14px;margin:0 5px 0;" />账号或密码不正确
        </div>
        <div class="form_area">
          <el-input
              v-model="param.mobile"
              class="w-50 m-2"
              placeholder="请输入帐号"
          >
            <template #prefix>
              <img src="../assets/login_avatar.svg" style="width:16px;height:20px;"/>
            </template>
          </el-input>
          <el-input
              v-model="param.password"
              type="password"
              class="w-50 m-2"
              placeholder="请输入密码"
          >
            <template #prefix>
              <img src="../assets/login_lock.svg" style="width:16px;height:20px;"/>
            </template>
          </el-input>
        </div>
        <div style="display:flex;justify-content: space-between">
          <div>

          </div>
          <span style="font-size: 12px;color: #999999;">忘记密码请联系管理员</span>
        </div>
        <el-button @click="submit">登录</el-button>
      </div>
    </div>
  </div>
</el-dialog>
</template>

<script>
import { login } from "../api";
import { useIndexStore } from "../stores/index.js";
import { mapStores } from "pinia";
export default {
  name: "loginDialog",
  props:{
    show:{
      type:Boolean,
      default:false
    }
  },
  computed:{
    ...mapStores(useIndexStore)
  },
  data(){
    return{
      visible:this.show,
      showError:false,
      param:{
        mobile:"",
        password:""
      }
    }
  },
  methods:{
    closeDialog(){
      this.$emit("sub_event",{act:"close_login_dialog"});
    },
    submit(){

      if(this.param.mobile.trim() === ""){
        this.$message.error({
          message:"帐号不能为空"
        });
        return;
      }
      let pattern =/(\d{3})(\d{4})(\d{4})/;
      if(!pattern.test(this.param.mobile)){
        this.$message.error({
          message:"请输入正确的手机号"
        });
        return;
      }
      if(this.param.password.trim() === ""){
        this.$message.error({
          message:"密码不能为空"
        });
        return;
      }
      login(this.param).then(res => {
        if(res.code === 0){
          if(res.data){
            this.showLoginDialog = false;
            localStorage.setItem("TOKEN",res.data);
            this.indexStore.getUserInfo().then((res)=>{
              if(res.code === 0){
                this.$message({
                  type:"success",
                  message:"登录成功"
                });
              }else{
                this.$message.error({
                  message:res.msg
                });
              }

            })

          }else{
            this.$message.error({
              message:res.msg
            });
          }
        }else{
          this.showError=true;
        }
      });
    }
  }
}
</script>

<style lang="less">
.login_dialog{
  width:700px;
  height:400px;
  padding:0;
  border-radius:8px;
  overflow: hidden;
  .el-dialog__header{display:none;}
  .main_body{
    width:700px;
    height:400px;
    display:flex;
    justify-content: space-between;
    .main_left{
      width:350px;
      background:url(../assets/login_left.png) no-repeat center center / 300px auto;
      margin-left:30px;
    }
    .main_right{
      width:260px;
      margin-right:50px;
    }
    .login_form{
      --color:rgb(0, 204, 153);
      margin-top:50px;
      text-align: center;
      position:relative;
      .error_tip{
        color:#00CC99;
        background-color: rgba(0, 204, 153, 0.09803921568627451);
        position:absolute;
        width: 100%;
        display: flex;
        align-items: center;
        font-size: 12px;
        padding: 3px 0;
        top:50px;
      }
      .el-button{
        --el-button-text-color:#fff;
        --el-button-bg-color:rgb(0, 204, 153);
        height:44px;
        width:260px;
        margin-top:15px;
        box-shadow: rgba(153, 0, 255, 0.498) 2px 2px 20px;
        &:hover,&:focus{
          --el-button-hover-text-color:#fff;
          --el-button-hover-border-color:rgb(0, 204, 153);
          --el-button-hover-bg-color:rgb(0, 204, 153);
        }
      }
      .form_title{
        color:var(--color);
        font-size:28px;
        font-weight: 700;
      }
      .form_area{
        margin-top:43px;
        --el-component-size:44px;
        --el-input-bg-color:#f4ecfe;
        .el-input{
          margin-bottom:15px;
          --el-fill-color-blank:#f4ecfe;

          box-shadow: none;
        }
        .el-input__wrapper{
          box-shadow: none;
        }
        .el-input__wrapper.is-focus{
          box-shadow: 0 0 2px #5900aa;
        }
      }
    }
  }
}

</style>
